<template>
  <div>
    <div>
      <h1>1. Select members</h1>
      <el-form label-width="120px">
        <el-form-item label="Groups">
          <el-select v-model="tryStore.selectedGroupName">
            <el-option v-for="group in groups.staticGroups" :label="group.groupName"
              :value="group.groupName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Members">
          <el-checkbox-group v-model="tryStore.selectedMembers">
            <el-checkbox v-for="member in tryStore.membersInSelectedGroup" :label="member.userName"
              :value="member.userName" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="Selected">
          <div>
            {{ tryStore.selectedMembers.join(", ") }}
          </div>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="genMemberContent()">Generate member content</el-button>
        </el-form-item>
      </el-form>
      <!-- <pre>{{ tryStore.selectedMembers }}</pre> -->
      <el-divider />
    </div>
    <!--  -->
    <div>
      <h1>2. Define tasks</h1>
      <div>

        <div class="line" v-for="(member, memberIndex) in tryStore.workMembers">
          <span>{{ member.userName }}</span>
          <el-select v-model="member.taskName" @change="handleAssign" style="width:200px;">
            <el-option v-for="(task, taskTndex) in tryStore.tasks" :label="task.taskName"
              :value="memberIndex + ',' + taskTndex" />
          </el-select>
        </div>
        <!-- <pre>{{ JSON.stringify(tryStore.workMembers, null, 2) }}</pre> -->
      </div>
      <el-divider />
    </div>
    <!--  -->
    <div>
      <h1>3. Set Time Range</h1>
      <div>
        <el-date-picker v-model="tryStore.timeRange.startDate" type="date" placeholder="Pick a day" />
        <el-date-picker v-model="tryStore.timeRange.endDate" type="date" placeholder="Pick a day" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import dayjs from "dayjs";
import groups from "./testData/groups.json";
import members from "./testData/members.json";
import memberTags from "./testData/tags.json";
import tasks from "./testData/tasks.json";

import useTryStore from "@/pinia/try.js";
const tryStore = useTryStore();

// const membersInGroup = computed(() => tryStore.members.filter(member => member.groupName == tryStore.selectedGroupName))

const genMemberContent = () => {
  const val = members.filter((member) =>
    tryStore.selectedMembers.includes(member.userName)
  );
  tryStore.workMembers = JSON.parse(JSON.stringify(val));
  console.log('genMemberContent', JSON.stringify(tryStore.workMembers, null, 2));
};

const handleAssign = (value) => {
  let valueArray = value.split(',')
  let memberIndex = parseInt(valueArray[0])
  let taskIndex = parseInt(valueArray[1])
  tryStore.workMembers[memberIndex].taskId = tryStore.tasks[taskIndex].taskId
  tryStore.workMembers[memberIndex].taskName = tryStore.tasks[taskIndex].taskName
  tryStore.workMembers[memberIndex].task = tryStore.tasks[taskIndex]
}

onMounted(() => {
  tryStore.members = members;
  tryStore.groups = groups;
  tryStore.memberTags = memberTags;
  tryStore.tasks = tasks;
});
</script>

<style lang="css" scoped>
.line {
  display: flex;
  align-items: center;
  padding: 4px 0;
}

.line>* {
  margin: 0 12px;
}
</style>